<template>
  <div id="app">
    <div class="Game " :class="stateCls" >
     <div class="roadback"></div>
     <div class="roadway">
         <div class="Hero" v-if="state!==0" :style="heroLocal"  @transitionend="end">
             <div class="body"></div>
             <div class="light"></div>
         </div>
         <div class="Enemy" ref="enemy"  :class="carType" :style="enemyState" @animationiteration="enemyend">
             <div class="body">
             </div>
         </div>
     </div>
     <div class="Start" v-show="state==0" @click="start"></div>
     <div class="Kilo">{{Kilo}}</div>
     <div class="Fail" v-show="state==2">
         <div class="failtext"></div>
         <div class="retry"></div>
     </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "name",
  components: {},
  computed:{
      carType(){
          return `enemy${this.enemyType}`
      },
      enemyState(){
          return `left:${this.enemyX}px`
      },
      heroLocal(){
          return `transform:translateX(${this.heroX}px)`
      },
      stateCls(){
          if(this.state==1){
              return `running`
          }else if(this.state ==2){
              return `crashed`
          }
      }
  },
  mounted(){
      this.events();
      this.updated()
  },
  data() {
    return {
        enemyType:0,
        heroX:0,
        enemyX:0,
        ticker:{},
        state:0,
        Kilo:0
    };
  },
  methods: {
      updated(){
          let rect = 0;
          this.ticker = setInterval(()=>{
              rect =this.$refs.enemy.getBoundingClientRect();
              if(this.state===1){
                  this.Kilo++
              }
            //   同一个赛道且超过碰撞距离
              if (rect.top + rect.height > 682 && this.heroX === this.enemyX) {
                this.state = 2
                this.ticker&&clearInterval(this.ticker)
            }
          },24)
      },
      events(){
          window.addEventListener('keydown',(e)=>{
              if(this.state!=1){
                  return false
              }
              if(e.keyCode==37){
                  this.heroX = 0
              }else if(e.keyCode == 39){
                  this.heroX = 178
              }
          })
      },
      end(){
          console.log('我移动了');
      },
      enemyend(){
          this.enemyX = Math.random() >0.5 ?0 :178;
          this.enemyType = Math.floor(Math.random()*3);
      },
       start () {
        this.state = 1
      },
  }
};
</script>
<style lang="scss">
body {
  background: #000;
  padding: 0;
  margin: 0;
}
.Game {
  width: 480px;
  height: 800px;
  position: absolute;
  margin: auto;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
  border: #fff 5px solid;
  //   运行
  &.running{
      .roadback{
          animation: roadRun 1.2s linear infinite;
          @keyframes roadRun {
              100% {transform: translateY(800px)}
          }
      }
      .Enemy{
          animation-play-state: running;
      }
  }
//   碰撞
  &.crashed{
     .Enemy,.roadback{
         animation-play-state: paused
     } 
     .Hero{
         .body{
             background: url(assets/heroDied.png) no-repeat
         }
         .light{
             display: none
         }
     }
     .Fail{
         animation: failShow 0.5s ease;
         display: block;
     }
     @keyframes failShow {
         0% {transform: translateY(250px)}
         80%{transform: translateY(-12px)}
         100%{transform: translateY(0)}
     }
  }
  .roadback {
    background: url(assets/road.png) repeat-y;
    width: 480px;
    height: 1600px;
    position: absolute;
    left: 0;
    top: -800px;
  }
  .roadway{
      width: 320px;
      height: 800px;
      position: absolute;
      left: 50%;
      top: 0;
      margin-left: -160px;
  }
}
.Hero{
    -webkit-transform: -webkit-transform .5s ease;
    width: 142px;
    height: 162px;
    position: absolute;
    bottom: 10px;
    left: 0;
    animation: heroShow 1s ease;
    @keyframes heroShow {
        0%{transform: translateY(200px)}
    }
    .body{
        background: url(assets/hero.png) no-repeat 50%  0,
        url(assets/heroDied.png) no-repeat -1000% 0;
        height: 100%;
    }
    .light{
        -webkit-animation: light .6s ease infinite;
        background: url(assets/carLight.png) no-repeat 50% 0;
        width: 142px;
        height: 57px;
        position: absolute;
        top: -35px;
        left: -5px;
    }
    @keyframes light {
        0%{opacity: 1;}
        50%{opacity: 0.3;}
        100%{opacity: 1;}
    }
}
.Enemy{
    width: 142px;
    position: absolute;
    height: 160px;
    top: -160px;
    animation: speed 4s linear infinite;
    animation-play-state: paused;
    @keyframes speed {
        100%{transform: translateY(1000px)}
    }
    .body{
        background:url(assets/car0.png) no-repeat 50% 0;
        height:100%;
    	position:relative;
    }
    &.enemy0{
        height: 160px;
        top: -160px;
        .body{
            background:url(assets/car0.png) no-repeat 50% 0;
        }
    }
    &.enemy1{
        height: 160px;
        top: -160px;
        .body{
            background:url(assets/car1.png) no-repeat 50% 0;
        }
    }
     &.enemy2{
        height: 220px;
        top: -220px;
        .body{
            background:url(assets/car2.png) no-repeat 50% 0;
        }
    }
}
    .Start{
        background: url(assets/start.png) no-repeat;
        width: 260px;
        height: 86px;
        position: absolute;
        left: 50%;
        top: 600px;
        margin-left: -130px;
        z-index: 10;
        cursor: pointer;
    }
    .Fail{
        width: 380px;
        height: 240px;
        border-radius: 10px;
        position: absolute;
        left: 50px;
        top: 50%;
        margin-top: -130rpx;
        z-index: 111;
        display: none;
        .failtext{
            background: url(assets/failedNotice.png) no-repeat 50% 0;
            width: 100%;
            height: 116px;
            display: block
        }
        .retry{
            background: url(assets/playAgainBtn.png) no-repeat;
            width: 266px;
            height: 99px;
            display: block;
            margin: 25px auto 0;
        }
    }
    .Kilo{
        background: url(assets/kilo.png) no-repeat;
        width: 83px;
        height: 100px;
        line-height: 100px;
        text-align: right;
        position: absolute;
        right: 0;
        top: 20px;
        font-size: 32px;
        font-weight: 700;
        color: #ffea00;
        padding-right: 50px;
    }
</style>
